import React from 'react'
import {connect} from 'react-redux'
import {NavBar} from 'antd-mobile'
import {Switch, Route,Redirect} from 'react-router-dom'
import NavLinkBar from '../navlink/navlink'
import Boss from '../../components/boss/boss'
import Genius from '../../components/genius/genius'
import User from '../../components/user/user'
import Msg from '../msg/msg'
import {getMsgList,recvMsg} from '../../redux/chat_redux'
import QueueAnim from 'rc-queue-anim';


@connect(
	state=>state,
	{getMsgList,recvMsg}
)
class Dashboard extends React.Component{
	componentDidMount(){
		if (!this.props.chat.chatmsg.length) {
			this.props.getMsgList()
			this.props.recvMsg()
		}

	}
	render(){
		const {pathname} = this.props.location
		const user = this.props.user;
		const navList = [
			{
				path:'/boss',
				text:'牛人',
				icon:'boss',
				title:'牛人列表',
				component:Boss,
				hide:user.type=='genius'
			},
			{
				path:'/genius',
				text:'boss',
				icon:'job',
				title:'BOSS列表',
				component:Genius,
				hide:user.type=='boss'
			},
			{
				path:'/msg',
				text:'消息',
				icon:'msg',
				title:'消息列表',
				component:Msg
			},
			{
				path:'/me',
				text:'我',
				icon:'user',
				title:'个人中心',
				component:User
			}
		]
		const page=navList.find(v=>v.path==pathname)
		console.log('user================')
		console.log(pathname)
//让动画生效 只渲染一个router 
		return (
			<div>
				
				{page?
					<div>
						<NavBar className='fixd-header' mode='dard'>{navList.find(v=>v.path==pathname).title}</NavBar>
						<div style={{marginTop:45}}>
								
								<QueueAnim delay='100' type='right'>
									<Route key={page.path} path={page.path} component={page.component}></Route>
								</QueueAnim>
								
						</div>
						<NavLinkBar data={navList}></NavLinkBar> 
					</div>
				 	:	
				 	user.loadDataEnd?<Redirect to={user.user}/>:''
				 }
				
			</div>
		)

		
	}

}

export default Dashboard